<template>
  <div class="login_wrap">
    <vue-particles
      color="#f99"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
    <a-card class="login_card" title="瞎搞" :bordered="false">
      <a-input class="input_dec" ref="userNameInput" v-model="userName" placeholder="请输入用户名">
        <a-icon slot="prefix" type="user" />
        <a-tooltip slot="suffix" title="仅为数字字母下滑线构成">
          <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
        </a-tooltip>
      </a-input>
      <a-input class="input_dec" ref="passwordInput" v-model="password" placeholder="请输入密码">
        <a-icon slot="prefix" type="lock" />
        <a-tooltip slot="suffix" title="大于六位数">
          <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
        </a-tooltip>
      </a-input>
      <!-- 按钮组 -->
      <!-- 忘记密码 -->
      <div class="forget">
        <a-button class="forgetlink" type="link" block></a-button>
        <a-button class="forgetlink" type="link" block>忘记密码</a-button>
      </div>
      <div class="btns">
        <a-button type="danger">重置</a-button>
        <a-button type="primary" @click="login">登录</a-button>
      </div>
    </a-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 用户数据
      userName: '',
      password: ''
    }
  },
  methods: {
    login () {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang='scss' scoped>
.login_wrap {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  position: relative;
  .login_card {
    width: 450px;
    height: 300px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    .input_dec {
      margin-bottom: 2em;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .forget{
        display: flex;
        align-items: center;
        justify-content: end;
        margin-bottom: 1em;
    }
  }
}
</style>
